<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			body{
				width: 100%;
				height: 100000px;
				background-image: url(img/白露.png);
				background-size: contain;
				/* 函数 cover 等比例放大图片  特点：原图按照比例放大存背景空间
				      【开发者:背景图大小是否等于背景空间】
					   contain  等比例缩放图片  特点：图片按照比例缩放存背景空间
				      【开发者:背景图等比例显示在背景空间】
  				*/
			   /*背景附件 -- 尺寸中存在cover或者contain*/
			   background-attachment: fixed; /* 背景图固定 scroll不固定 */  
			}
			di v{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/白露.png);
				/* 问题:超大图-不显示 小图-显示
                注意：背景空间大小,如果图小于背景空间 --- 平铺
                */
			   background-repeat: no-repeat;
			   /* no-repeat不平铺  repeat-x,y 横，纵向平铺 */
			   background-size: 30%;
			   /* 背景尺寸属性值：数值px % |函数 cover contain */
			   /* 背景定位：前提背景空间大于背景图 关键字：center、left、right、top.. */
			   background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos magni nihil porro natus eius similique, impedit nam rerum deserunt, ex at debitis quas perferendis quam harum voluptatem ratione quisquam voluptatum.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ex minus eum nihil voluptatum reiciendis voluptatibus eaque nobis eos expedita repellendus ipsum non provident consectetur quidem, nesciunt neque fugit ea!
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam mollitia fugiat blanditiis, ipsam molestiae nemo itaque voluptatibus magnam eaque aut maiores excepturi, necessitatibus doloribus facilis quo. Aperiam totam minus est!
	 <!-- htmL img图片 引入一张图片,位置不可随意改变
		css 背景图片 引入一张图片,位置可以随意改变
		子属性 background-color  背景颜色
		      background-image  背景图
			  background-repeat 背景重复
			  background-size   背景尺寸
			  background-attachment 背景附件
			  background-position   背景定位
		复合属性 background:background-image  background-color  background-position
		                   background-size  background-repeat和background-attachment
		
		简写属性:background-image  background-position|background-size  background-repeat|attachment
		代替子属性 background-image、background-color、background-repeat
		-->
		<div></div>
	</body>
</html>